$(function () {
    // 需求1: 点击a链接，显示隐藏盒子;
    $("#loginBox a").on('click', function () {
        // 登录盒子隐藏，注册盒子显示
        $("#loginBox").hide();
        $("#regBox").show();
    });
    $("#regBox a").on('click', function () {
        // 登录盒子显示，注册盒子隐藏
        $("#loginBox").show();
        $("#regBox").hide();
    });

    // 需求2: 自定义校验规则
    const form = layui.form; // 用变量接收layui中的form属性;
    // verify() 自定义规则, 参数是一个对象;
    //   属性是规则名称;  
    //   值是具体规则，有两种，一种是数组，一种是函数;
    form.verify({
        // 属性是规则名称, 值是具体规则
        username: [
            /^[a-zA-Z0-9]{1,10}$/, // 具体规则
            "用户名必须是1-10位字母和数字" // 报错信息
        ],
        // 密码规则
        password: [
            /^[\S]{6,15}$/,
            "密码长度必须是6-15位的非空字符串"
        ],
        // 确认密码校验规则, 就是密码和确认密码一致;
        rePwd: function (value) {
            // 判断，密码和确认密码不一致，就报错！
            let pwd = $('#regBox input[name=password]').val();
            if (value != pwd) {
                return '密码和确认密码不一致，请重新输入！';
            }
        }
    });

    // 需求3: 注册功能;
    const layer = layui.layer;
    $("#formReg").on('submit', function (e) {
        e.preventDefault();
        // 手动发送ajax
        axios({
            method: 'POST',
            url: '/api/reguser',
            // 大事件目前只支持   a=1&b=2&c=3    
            // 大事件目前还不支持 {"a":1,"b":2} 参数传递方式
            data: $(this).serialize()
        }).then(res => {
            // console.log(res);
            if (res.data.status != 0) {
                // return alert(res.data.message);
                return layer.msg(res.data.message);
            }
            // 成功提示
            // alert('恭喜您，注册用户成功！');
            layer.msg('恭喜您，注册用户成功！')
            // 清空form表单
            $("#formReg")[0].reset();
            // 切换显示登录表单
            $("#regBox a").click();
        });
    })

    // 需求4: 登录功能;
    $("#formLogin").on('submit', function (e) {
        e.preventDefault();
        // 发送ajax
        axios({
            method: 'POST',
            url: '/api/login',
            // 大事件项目参数必须以：a=1&b=2&c=3形式传递
            data: $(this).serialize()
        }).then(res => {
            // 判断状态码
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 成功提示
            layer.msg('恭喜您，登录成功！');
            // 保存token，将来有用;
            localStorage.setItem('token', res.data.token);
            // 页面跳转，跳转到首页;
            location.href = '/index.html';
        });
    })
});